@page "/scheduler/search-events"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This example showcases the search results of Scheduler appointments in a grid. When the user provides the
        search string on appropriate fields, the resulting event collection based on the search criteria will be
        displayed in a Grid.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, the search text value is compared with the event field values of Scheduler DataSource and then
        the filtered resultant event data collection is assigned to the DataSource of Grid.
    </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        @if (Show)
        {
            <SfSchedule TValue="ScheduleData.AppointmentData" @ref="ScheduleObj" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
                <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
                <ScheduleViews>
                    <ScheduleView Option="View.Day"></ScheduleView>
                    <ScheduleView Option="View.Week"></ScheduleView>
                    <ScheduleView Option="View.WorkWeek"></ScheduleView>
                    <ScheduleView Option="View.Month"></ScheduleView>
                    <ScheduleView Option="View.Agenda"></ScheduleView>
                </ScheduleViews>
            </SfSchedule>
        }
        else
        {
            <SfGrid DataSource="GridDataSource" Width="auto" Height="505px">
                <GridColumns>
                    <GridColumn Field="Subject" HeaderText="Subject" Width="120px"></GridColumn>
                    <GridColumn Field="Location" HeaderText="Location" Width="120px"></GridColumn>
                    <GridColumn Field="StartTime" HeaderText="StartTime" Width="120px" Format="g" Type="ColumnType.DateTime"></GridColumn>
                    <GridColumn Field="EndTime" HeaderText="EndTime" Width="120px" Format="g" Type="ColumnType.DateTime"></GridColumn>
                </GridColumns>
            </SfGrid>
        }
    </div>
</div>
<div class="col-lg-3 property-section property-customization">
    <br>
    <div class="property-panel-section">
        <p class="property-panel-header header-customization" style="width: 100%;">Search by all event fields</p>
        <div class="property-panel-content">
            <SfTextBox ID="events-search" Placeholder='Enter the Search text' Input="@OnEventSearch"></SfTextBox>
        </div>
        <div class="event-search">
            <p class="property-panel-header header-customization" style="width: 100%;">Search by specific event fields</p>
            <table id="property-specific" style="width:100%">
                <tbody>
                    <tr class="row">
                        <td class="property-panel-content" colspan="2">
                            <div>
                                <SfTextBox ID="searchEventName" @bind-Value="@SubjectValue" Placeholder="Subject"></SfTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr class="row" style="height: 45px">
                        <td class="property-panel-content" colspan="2">
                            <div>
                                <SfTextBox ID="searchEventLocation" @bind-Value="@LocationValue" Placeholder="Location"></SfTextBox>
                            </div>
                        </td>
                    </tr>
                    <tr class="row" style="height: 45px">
                        <td class="property-panel-content" colspan="2">
                            <div>
                                <SfDatePicker TValue="DateTime?" @bind-Value="@DateStart" Placeholder="Start Date"></SfDatePicker>
                            </div>
                        </td>
                    </tr>
                    <tr class="row" style="height: 45px">
                        <td class="property-panel-content" colspan="2">
                            <div>
                                <SfDatePicker TValue="DateTime?" @bind-Value="@DateEnd" Placeholder="End Date"></SfDatePicker>
                            </div>
                        </td>
                    </tr>
                    <tr class="row" style="height: 45px">
                        <td class="e-field button-customization" style="width: 50%; padding: 15px 3px;">
                            <div>
                                <SfButton Content="Search" OnClick="@OnSearchClick"></SfButton>
                            </div>
                        </td>
                        <td class="e-field button-customization" style="width: 50%; padding: 15px 3px;">
                            <div>
                                <SfButton Content="Clear" OnClick="@OnClearClick"></SfButton>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    SfSchedule<ScheduleData.AppointmentData> ScheduleObj;
    public DateTime CurrentDate = new DateTime(2020, 1, 9);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
    public List<ScheduleData.AppointmentData> GridDataSource = new List<ScheduleData.AppointmentData>();
    public bool Show { get; set; } = true;
    public string SubjectValue { get; set; }
    public string LocationValue { get; set; }
    public DateTime? DateStart { get; set; }
    public DateTime? DateEnd { get; set; }

#pragma warning disable BL0005, CA2000  // Component parameter should not be set outside of its component, Dispose objects before losing scope
    public async Task OnEventSearch(InputEventArgs args)
    {
        if (!string.IsNullOrEmpty(args.Value))
        {
            Query query = new Query().Search(args.Value, new List<string> { "Subject", "Location", "Description" }, null, true, true);
            List<ScheduleData.AppointmentData> eventCollections = await ScheduleObj.GetEventsAsync(null, null, true);
            object data = await new DataManager() { Json = eventCollections }.ExecuteQuery<ScheduleData.AppointmentData>(query);
            List<ScheduleData.AppointmentData> resultData = (data as List<ScheduleData.AppointmentData>);
            if (resultData.Count > 0)
            {
                Show = false;
                GridDataSource = resultData;
            }
            else
            {
                Show = true;
            }
        }
        else
        {
            Show = true;
        }
    }

    public async Task OnSearchClick()
    {
        DateTime? startDate = null;
        DateTime? endDate = null;
        List<WhereFilter> searchObj = new List<WhereFilter>();
        if (!string.IsNullOrEmpty(SubjectValue))
        {
            searchObj.Add(new WhereFilter() { Field = "Subject", Operator = "contains", value = SubjectValue, Condition = "or", IgnoreCase = true });
        }
        if (!string.IsNullOrEmpty(LocationValue))
        {
            searchObj.Add(new WhereFilter() { Field = "Location", Operator = "contains", value = LocationValue, Condition = "or", IgnoreCase = true });
        }
        if (DateStart != null)
        {
            startDate = Convert.ToDateTime(DateStart);
            searchObj.Add(new WhereFilter() { Field = "StartTime", Operator = "greaterthanorequal", value = startDate, Condition = "and", IgnoreCase = false });
        }
        if (DateEnd != null)
        {
            endDate = (Convert.ToDateTime(DateEnd)).AddDays(1);
            searchObj.Add(new WhereFilter() { Field = "EndTime", Operator = "lessthanorequal", value = endDate, Condition = "and", IgnoreCase = false });
        }

        if (searchObj.Count > 0)
        {
            Query query = new Query().Where(new WhereFilter() { Condition = "and", IsComplex = true, predicates = searchObj });
            List<ScheduleData.AppointmentData> eventCollections = await ScheduleObj.GetEvents(startDate, endDate, true);
            object data = await new DataManager() { Json = eventCollections }.ExecuteQuery<ScheduleData.AppointmentData>(query);
            List<ScheduleData.AppointmentData> resultData = (data as List<ScheduleData.AppointmentData>);
            GridDataSource = resultData;
            Show = false;
        }
        else
        {
            Show = true;
        }
    }
#pragma warning restore BL0005, CA2000 // Component parameter should not be set outside of its component, Dispose objects before losing scope

    public void OnClearClick()
    {
        Show = true;
        SubjectValue = LocationValue = string.Empty;
        DateStart = DateEnd = null;
    }
}
<style>
    .header-customization {
        padding-bottom: 10px;
    }

    .property-customization {
        padding-right: 5px;
    }

    .button-customization {
        padding: 15px 3px;
    }

    @@media (max-width: 441px) {
        .button-customization {
            padding: 30px;
        }
    }
</style>
